<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-08-07 16:18:55
 * @FilePath: \tmsadmin\src\views\contactus\components\list.vue
-->

<template>
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
          <h2>联系我们</h2>
          <el-button style="margin-left: 20px" type="primary" @click="edit">
            编辑
          </el-button>
        </div>
        <div class="right">
          <el-button circle @click="refreshFun">
            <i class="icon ion-refresh" :class="iconRefresh" />
          </el-button>
        </div>
      </div>
    </template>
   <div>
     <el-form :disabled="disabled" ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon>
      <el-form-item label="公司简介" prop="introduction" style="position: relative;">
        <Editor ref="editorRef" :value="ruleForm.introduction"  @updateValue="getValue"></Editor>
        <div class="bg" v-if="disabled"></div>
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <el-input placeholder="请输入" v-model="ruleForm.address" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input placeholder="请输入" v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="公司邮箱" prop="mail">
        <el-input placeholder="请输入" v-model="ruleForm.mail" />
      </el-form-item>
      </el-form>
      <el-form-item label-width="100px" v-if="!disabled">
        <el-button @click="handleCloses(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">
          确 认
        </el-button>
      </el-form-item>
   </div>
  </el-card>
</template>
<script lang="ts" setup>
import { REQUEST } from '@/api/request'
import { ElMessage, FormInstance } from 'element-plus'
import { onMounted, ref } from 'vue'
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  introduction:'',
  address: "",
  phone: "",
  mail:''
})
const rules = ref({
  address: [{ required: true, message: '请输入', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入', trigger: 'blur' }],
  mail: [{ required: true, message: '请输入', trigger: 'blur' }],
  introduction: [{ required: true, message: '请输入', trigger: 'blur' }]
})
const iconRefresh = ref('')
onMounted(() => {
  getData()
})

const getValue = (res: any) => {
  ruleForm.value.introduction = res
}
const refreshFun = () => {
  iconRefresh.value = 'iconRefresh'
  getData()
  setTimeout(() => {
    iconRefresh.value = ''
  }, 1000)
}
const editorRef = ref()
const getData = () => {
  REQUEST.POST('CONTACTUS',{}).then((res:any) => {
    ruleForm.value = res.data
     editorRef.value.setValues(ruleForm.value.introduction)
  })
}
const handleCloses = (el:FormInstance) => {
  el?.resetFields()
  disabled.value = true
}
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      REQUEST.POST('CONTACTUSEDIT',{
        ...ruleForm.value
      }).then((res:any) => {
        ElMessage.success({
          message: res.msg,
          type: 'success'
        })
        disabled.value = true
        getData()
      })
    }
  })
  
}
const disabled = ref(true)
const edit = () => {
  disabled.value = false
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left{
    display: flex;
    align-items: center;
  }
}
.demo-ruleForm{
  max-width: 800px;
}
.bg{
  width: 700px;
  height: 382px;
  background: rgba(168, 171, 178,.05);
  position: absolute;
  top: 0px;
  left: 0;
}
</style>
